<template>
  <el-table id='musicTable' :data="songList" size="mini" style="width: 100%" @row-dblclick="handleDbClick" @cell-click="handleRowClick" highlight-current-row stripe lazy :row-key="
              (row) => {
                return row.id;
              }
            " v-infinite-scroll='loadMore' :infinite-scroll-distance='200' :infinite-scroll-disabled='disabled' :infinite-scroll-delay='10' :infinite-scroll-immedtaed='false'>
    <el-table-column label="" width="40" type="index" :index="handleIndex">
    </el-table-column>
    <el-table-column label="" width="23">
      <!-- 下载按钮 -->
      <i class="iconfont icon-download"></i>
    </el-table-column>
    <el-table-column prop="name" label="音乐标题" min-width="350">
    </el-table-column>
    <el-table-column prop="ar[0].name" label="歌手" min-width="120">
    </el-table-column>
    <el-table-column prop="al.name" label="专辑" min-width="170">
    </el-table-column>
    <el-table-column prop="dt" label="时长" min-width="100">
    </el-table-column>

  </el-table>

</template>

<script>
let musicTableEl = null
import { mapState } from 'vuex'
export default {
  name: 'musicTable',
  computed: {
    ...mapState(['isLogin', 'musicListId', 'musicId'])
  },
  props: {
    songList: {
      type: Array,
      default() {
        return []
      }
    },
    listId: {
      type: [Number, String],
      default: ''
    },
    isMore: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  data() {
    return {
      // 无限滚动是否可用
      disabled: true
    }
  },
  mounted() {
    // 判断是否和上一次打开的歌单相同
    this.$nextTick(() => {
      if (this.$route.params.id == this.musicListId) {
        this.handleDOM(this.musicId)
      }
    })
  },
  destroyed() {
    console.log('musicTableEl = null')
    musicTableEl = null
  },
  watch: {
    '$store.state.musicId'(current, last) {
      this.handleDOM(current, last)
    }
  },
  methods: {
    // 事件函数
    handleIndex(index) {
      return (index + 1 + '').padStart(2, '0')
    },
    loadMore() {
      console.log('loadMore')
      this.$emit('loadMore')
    },
    handleDbClick(row) {
      this.$store.commit('updateMusicId', row.id)
      if (this.listId != this.musicListId) {
        this.$store.commit('updateMusicList', {
          musicList: this.songList,
          musicListId: this.listId
        })
      }
    },
    handleDOM(current, last) {
      if (musicTableEl == null) {
        musicTableEl = document.getElementById('musicTable')
      }
      let curIdx = -1
      let lastIdx = -1
      const rowArr = musicTableEl.querySelectorAll('.el-table__row')
      curIdx = this.songList.findIndex(v => v.id == current)
      if (curIdx !== -1) {
        rowArr[curIdx].querySelector('.cell').innerHTML = `<i class="iconfont icon-yinliang"></i>`
      }
      if (last) {
        lastIdx = this.songList.findIndex(v => v.id == last)
        if (lastIdx !== -1) {
          rowArr[lastIdx].querySelector('.cell').innerHTML = this.handleIndex(lastIdx)
        }
      }
    },

    async handleRowClick(row, column, cell) {
      const el = cell.querySelector('.icon-download')
      // 判断点击的是下载按钮
      if (el) {
        // 请求该歌曲的url
        let res = await this.$request('/song/url', { id: row.id })
        if (res.data.data[0].url == null) {
          this.$message.warning('暂时无法获取该资源哦!')
          return
        }
        // 匹配资源的域名
        let url = res.data.data[0].url.match(/\http.*?\.net/)
        // 匹配域名名称，并匹配对应的代理
        let serve = url[0].match(/http:\/(\S*).music/)[1]
        if (serve != '/m7' && serve != '/m701' && serve != '/m8' && serve != '/m801') {
          // 没有对应的代理
          this.$message.error('匹配不到对应的代理,下载失败!')
          return
        }
        // 截取后面的参数
        let params = res.data.data[0].url.slice(url[0].length)
        // console.log(url[0], serve, params);
        let downloadMusicInfo = {
          url: serve + params,
          name: row.name + ' - ' + row.ar[0].name + '.' + res.data.data[0].type.toLowerCase()
        }
        console.log(downloadMusicInfo)
        this.$store.commit('updateDownloadMusicInfo', downloadMusicInfo)
      }
    }
  }
}
</script>

<style scoped>
#musicTable /deep/ .icon-yinliang {
  color: var(--red) !important;
  font-size: 12px;
}
</style>